<template>
  <div style="height: 80%">
    <div class="table-box table-content">
      <ProTable
        ref="visitProTable"
        :columns="columns"
        :request-api="getVisitList"
        :init-param="initParam"
        :request-auto="true"
        :data-callback="dataCallback"
        @row-click="showVisitItemList"
        :search-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
        row-key="visitNo"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <el-button type="primary" :icon="CirclePlus" @click="addVisit">新增</el-button>
          <el-button type="primary" :icon="EditPen" plain @click="editVisit(scope)">编辑</el-button>
          <el-button type="primary" :icon="Delete" plain @click="delVisit(scope)">删除</el-button>
        </template>
      </ProTable>

      <el-drawer v-model="visitDrawer" :title="`${visitTitle}回访事项`" :direction="direction" :before-close="handleClose">
        <el-form>
          <el-form-item label="名称">
            <el-input v-model="visitName" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="visitType" placeholder="请选择" :disabled="visitTitle === '编辑'">
              <el-option v-for="item in selectVisitType" :key="item.name" :value="item.value" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="visitSort" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="visitStatus">
              <el-radio value="true" size="large">启用</el-radio>
              <el-radio value="false" size="large">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" :icon="Upload" @click="UploadVisit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
    <div class="table-box table-content">
      <ProTable
        ref="visitItemProTable"
        :columns="visitItemcolumns"
        :request-api="getVisitItem"
        :init-param="visitIteminitParam"
        :request-auto="false"
        :data-callback="visitItemdataCallback"
        :search-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
        row-key="visitItemNo"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <el-button type="primary" :icon="CirclePlus" @click="addVisitItem">新增</el-button>
          <el-button type="primary" :icon="EditPen" plain @click="editVisitItem(scope)">编辑</el-button>
          <el-button type="primary" :icon="Delete" plain @click="delVisitItem(scope)">删除</el-button>
        </template>
      </ProTable>

      <el-drawer
        v-model="visitItemDrawer"
        :title="`${visitItemTitle}回访事项`"
        :direction="direction"
        :before-close="handleClose"
      >
        <el-form>
          <el-form-item label="名称">
            <el-input v-model="visitItemName" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" :icon="Upload" @click="UploadVisitItem">提交</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>
<script setup lang="ts" name="followMatters">
import { ref, reactive, onMounted } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps, HeaderRenderScope } from "@/components/ProTable/interface";
import {
  getVisitList,
  addVisitList,
  editVisitList,
  deleteVisitList,
  getVisitItem,
  addVisitItemList,
  editVisitItemList,
  deleteVisitItemList
} from "@/api/modules/dataDictionary";
import { CirclePlus, Delete, EditPen, Search, Download, Upload, View, Refresh, InfoFilled } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import type { DrawerProps } from "element-plus";
const visitProTable = ref<ProTableInstance>();
const visitItemProTable = ref<ProTableInstance>();
const columns = reactive<ColumnProps<any>[]>([
  { type: "selection" },
  {
    prop: "visitNo",
    label: "编号",
    sortable: true
  },
  {
    prop: "visitName",
    label: "名称",
    sortable: true,
    search: {
      el: "input",
      tooltip: "输入自定义类型名称",
      label: "输入名称",
      key: "visitDTO.visitName"
    }
  },
  {
    prop: "visitItemType",
    label: "类型",
    sortable: true,
    render: (scope: any) => {
      switch (scope.row.visitItemType) {
        case "radio":
          return "单选";
        case "text":
          return "文本";
        case "Lob":
          return "长文本";
        case "Integer":
          return "整数";
        default:
          return "";
      }
    }
  },
  { prop: "visitOrder", label: "排序", sortable: true },
  {
    prop: "useStatus",
    label: "状态",
    sortable: true,
    render: (scope: any) => {
      switch (scope.row.useStatus) {
        case true:
          return "启用";
        case false:
          return "禁用";
        default:
          return "";
      }
    }
  }
]);
const visitItemcolumns = reactive<ColumnProps<any>[]>([
  { type: "selection" },
  {
    prop: "visitItemNo",
    label: "编号",
    sortable: true
  },
  {
    prop: "visitItemName",
    label: "选项值",
    sortable: true
    // search: {
    //   el: "input",
    //   tooltip: "输入自定义类型名称",
    //   label: "输入名称",
    //   key: "visitDTO.visitName"
    // }
  }
]);
const initParam = ref("");
const visitIteminitParam = reactive({ visitNo: "" });
const visitDrawer = ref(false);
const visitItemDrawer = ref(false);
const direction = ref<DrawerProps["direction"]>("rtl");
const visitTitle = ref("");
const visitName = ref("");
const visitType = ref("");
const visitSort = ref("");
const visitStatus = ref("true");
const visitItemName = ref("");
const visitItemTitle = ref("");
const selectVisitType = ref([
  { name: "单选", value: "radio" },
  { name: "文本", value: "text" },
  { name: "长文本", value: "Lob" },
  { name: "整数", value: "Integer" }
]);
const visitNo = ref("");
const dataCallback = (data: any) => {
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};
const visitItemdataCallback = (data: any) => {
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};
//新增回访
const addVisit = () => {
  visitDrawer.value = true;
  visitTitle.value = "新增";
};
const editVisit = e => {
  console.log(e.selectedList);
  if (e.selectedList.length > 1 || e.selectedList.length === 0) {
    ElMessage.error("请选择一条数据");
    return;
  } else {
    ElMessage.success("编辑");
    visitDrawer.value = true;
    visitTitle.value = "编辑";
    visitName.value = e.selectedList[0].visitName;
    visitType.value = e.selectedList[0].visitItemType;
    visitSort.value = e.selectedList[0].visitOrder;
    visitStatus.value = e.selectedList[0].useStatus.toString();
    console.log(visitStatus.value);
    visitNo.value = e.selectedList[0].visitNo;
  }
};
const delVisit = async scope => {
  if (scope.selectedList.length === 0) {
    ElMessage.error("请选择至少一条数据");
  } else {
    let params = "";
    scope.selectedList.forEach(item => {
      params += "ids=" + item.visitNo + "&";
    });
    const data = await deleteVisitList(params);
    try {
      if ((data as any) === null) {
        ElMessage.success("删除成功");
        visitProTable.value?.clearSelection();
        visitProTable.value?.getTableList();
      }
    } catch (e) {
      ElMessage.error("此数据存在相关联的数据，不能删除");
    }
  }
};
//
const handleClose = () => {
  //
  visitDrawer.value = false;
  visitName.value = "";
  visitType.value = "";
  visitSort.value = "";
  visitStatus.value = "true";
  //
  visitItemDrawer.value = false;
  visitItemTitle.value = "";
  visitItemName.value = "";
};
//提交回访事项
const UploadVisit = async () => {
  if (visitTitle.value === "新增") {
    const params = {
      "visitDTO.visitName": visitName.value,
      "visitDTO.visitItemType": visitType.value,
      "visitDTO.visitOrder": visitSort.value,
      "visitDTO.useStatus": visitStatus.value
    };
    const data = await addVisitList(params);
    if ((data as any) === null) {
      ElMessage.success("新增成功");
      visitDrawer.value = false;
      visitName.value = "";
      visitType.value = "";
      visitSort.value = "";
      visitStatus.value = "true";
      visitProTable.value?.getTableList();
    }
  } else if (visitTitle.value === "编辑") {
    const params = {
      "visitDTO.visitName": visitName.value,
      "visitDTO.visitOrder": visitSort.value,
      "visitDTO.useStatus": visitStatus.value,
      "visitDTO.visitNo": visitNo.value
    };
    const data = await editVisitList(params);
    if ((data as any) === null) {
      ElMessage.success("编辑成功");
      visitDrawer.value = false;
      visitName.value = "";
      visitType.value = "";
      visitSort.value = "";
      visitStatus.value = "true";
      visitProTable.value?.getTableList();
    }
  }
};
//
const isAddVisitItem = ref(true);
const showVisitItemList = e => {
  console.log(e);
  visitIteminitParam["visitNo"] = e.visitNo;

  if (e.visitItemType === "radio") {
    isAddVisitItem.value = true;
  } else {
    isAddVisitItem.value = false;
  }
};
//添加选项值
const addVisitItem = e => {
  if (visitIteminitParam.visitNo === "") {
    ElMessage.error("请选择回访事项");
  } else {
    if (isAddVisitItem.value === true) {
      visitItemDrawer.value = true;
      visitItemTitle.value = "新增";
    } else {
      ElMessage.error("当前类型不需要填写选项值！");
    }
  }
};
//编辑选项值
const visitItemNo = ref("");
const editVisitItem = e => {
  console.log(e.selectedList);
  if (e.selectedList.length > 1 || e.selectedList.length === 0) {
    ElMessage.error("请选择一条数据");
    return;
  } else {
    ElMessage.success("编辑");
    visitItemDrawer.value = true;
    visitItemTitle.value = "编辑";
    visitItemName.value = e.selectedList[0].visitItemName;
    visitItemNo.value = e.selectedList[0].visitItemNo;
  }
};
//删除选项值
const delVisitItem = async scope => {
  if (scope.selectedList.length === 0) {
    ElMessage.error("请选择至少一条数据");
  } else {
    let delStr = "";
    scope.selectedList.forEach(item => {
      delStr += item.visitItemName + ",";
    });
    ElMessageBox.confirm("您确定要删除这些:" + delStr + "数据吗", "删除确认", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      center: true
    })
      .then(async () => {
        let params = "";
        scope.selectedList.forEach(item => {
          params += "ids=" + item.visitItemNo + "&";
        });
        const data = await deleteVisitItemList(params + "&visitNo=" + visitIteminitParam["visitNo"]);
        try {
          if ((data as any) === null) {
            visitItemDrawer.value = false;
            visitItemName.value = "";
            visitItemProTable.value?.clearSelection();
            visitItemProTable.value?.getTableList();
          }
        } catch {
          ElMessage.error("此数据存在相关联的数据，不能删除");
        }
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消删除"
        });
      });
  }
};
//提交选项值
const UploadVisitItem = async e => {
  if (visitItemTitle.value === "新增") {
    const params = {
      "visitItemDTO.visitItemName": visitItemName.value,
      "visitItemDTO.visitNo": visitIteminitParam["visitNo"]
    };
    const data = await addVisitItemList(params);
    console.log(data);
    if ((data as any) === null) {
      ElMessage.success("新增成功");
      visitItemDrawer.value = false;
      visitItemName.value = "";
      visitItemProTable.value?.getTableList();
    }
  } else if (visitItemTitle.value === "编辑") {
    console.log(visitItemNo.value);
    const params = {
      "visitItemDTO.visitItemName": visitItemName.value,
      "visitItemDTO.visitItemNo": visitItemNo.value,
      "visitItemDTO.visitNo": visitIteminitParam["visitNo"]
    };
    const data = await editVisitItemList(params);
    if ((data as any) === null) {
      ElMessage.success("编辑成功");
      visitItemDrawer.value = false;
      visitItemName.value = "";
      visitItemProTable.value?.getTableList();
    }
  }
};
</script>
